<template>
	<block>
		<hxt-layout id="hxt-layout" title="姨妈助手" svc="menstruation" initTitle="姨妈助手加载失败" @initPage="initPage">
			<view class="hxt-flex-column" style="background-color: #F5F5F5;" v-if="show">
				<van-calendar ref="calendar" color="#07c160" :show-subtitle="false" type="single"
					:formatter="formatter" :poppable="false" :min-date="minDate" :max-date="maxDate"
					:show-confirm="false" :default-date="date" @confirm="onConfirm">
					<template v-slot:title>
						<view class="hxt-flex padding-lr-sm">
							<view @click="!prevMonth.disabled&&goto(0,prevMonth.date)"
								:class="[prevMonth.disabled?'color-gray':'color-blue']">
								<van-icon name="arrow-left"></van-icon>
								{{prevMonth.m}}
							</view>

							<view class="hxt-flex-fill text-center">
								<text class="bold">{{currentMonth.m}}</text>
								<van-icon name="location-o" class="color-blue"
									@click="goto(1,currentMonth.date)">今天</van-icon>
								</div>
							</view>
							<view :class="[nextMonth.disabled?'color-gray':'color-blue']"
								@click="!nextMonth.disabled&&goto(2,nextMonth.date)">
								{{nextMonth.m}}
								<van-icon name="arrow"></van-icon>
							</view>
						</view>
					</template>
				</van-calendar>
				<view class="hxt-flex-fill" style="height: 1px;margin: 20px 0;">
					<van-cell-group inset custom-class="van-cell-group-scroll" :border="false">
						<!-- <van-cell title-style="flex:none;min-width:150rpx;" v-for="item in objList" :key="item.schId"
							:title="item.schTitle" :value="item.schMark"></van-cell> -->
						<van-cell title-style="flex:none;min-width:150rpx;" title="姨妈来了？">
							<switch :checked="msId>0" @change="change"></switch>
						</van-cell>
					</van-cell-group>
				</view>
			</view>
		</hxt-layout>
	</block>
</template>
<script>
	import hxt from "@/utils/hxt.js"
	var list = [];
	export default {
		data() {
			const app = getApp();
			return {
				list: [],
				show: false,
				currentUser: app.globalData.currentUser,
				minDate: new Date(hxt.dateConfig().monthBegin).getTime(),
				maxDate: new Date(hxt.dateConfig().monthEnd).getTime(),
				msId: 0,
				date: new Date(),
			}
		},
		onShow: function(e) {

		},
		watch: {
			date: function(val) {
				var _this = this;
				var obj = _this.list.find(function(item) {
					return item.msDate == hxt.dateFormat("yyyy-MM-dd", val);
				});
				if (!!obj) _this.msId = obj.msId;
				else _this.msId = 0;
			}
		},
		computed: {
			currentMonth: function() {
				return {
					m: hxt.dateFormat("yyyy年MM月", this.date),
					date: this.date,
				};
			},
			prevMonth: function() {
				return {
					m: hxt.dateFormat('M月', hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date))),
					date: hxt.dateAdd('M', -1, hxt.dateFormat('yyyy-MM-01', this.date)),
					disabled: hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd')) > hxt.dateAdd('M', 0, this.date)
				};
			},
			nextMonth: function() {
				return {
					m: hxt.dateFormat('M月', hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date))),
					date: hxt.dateAdd('M', +1, hxt.dateFormat('yyyy-MM-01', this.date)),
					disabled: hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd')) < hxt.dateAdd('M', 0, this.date)
				};
			}
		},
		methods: {
			initPage: function(e) { //初始化事件
				var _this = this;
				if (!e.user) e.callBack('个人资料加载失败');
				_this.loadList();
			},
			loadList: function() {
				var _this = this;
				hxt.post({
					url: hxt.domain + 'pc/menstruationList',
					data: {
						beginTime: hxt.dateConfig(this.date).monthBegin,
						endTime: hxt.dateConfig(this.date).monthEnd,
						pageIndex: 1,
						pageSize: 100
					},
					ok: function(res) {
						if (res.data.code != 0) return hxt.Notify({
							type: 'danger',
							message: '加载失败：：' + res.data.errmsg + '，请稍后重试！'
						});
						_this.list = res.data.data.list;
						list = res.data.data.list;
						_this.$nextTick(function() {
							_this.show=true;
							var obj = _this.list.find(function(item) {
								return item.msDate == hxt.dateFormat("yyyy-MM-dd",_this.date);
							});
							if (!!obj) _this.msId = obj.msId;
							else _this.msId = 0;
						});
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '加载失败：：' + res.data.errmsg + '，请稍后重试！'
						});
					}
				});
			},
			formatter: function(day) {
				var obj = list.find(function(item) {
					return item.msDate == hxt.dateFormat("yyyy-MM-dd", day.date);
				});
				if (!!obj) {
					day.bottomInfo = '♥';
				}
				return day;
			},
			onConfirm: function(e) {
				var _this = this;
				_this.date = e.detail;
			},
			goto: function(type, date) { //0上一月 1今天 2下一月
				var _this = this,
					date = type == 1 ? new Date() : date;
				_this.show = false;
				_this.date = date;
				_this.loadList();
				_this.$nextTick(function() {
					_this.minDate = new Date(hxt.dateConfig(date).monthBegin).getTime();
					_this.maxDate = new Date(hxt.dateConfig(date).monthEnd).getTime();
				});
			},
			change: function(e) {
				var _this = this;
				hxt.post({
					url: hxt.domain + "pc/menstruationSave",
					data: {
						optType: !!e.detail.value ? 0 : 2,
						msDate: hxt.dateFormat("yyyy-MM-dd", _this.date),
						msId: _this.msId
					},
					ok: function(res) {
						if (res.data.code != 0) {
							hxt.Notify({
								type: 'danger',
								message: '操作失败：' + res.data.errmsg
							});
							return;
						};
						_this.show=false;
						hxt.Notify({
							type: 'success',
							message: '操作成功',
							duration: 1000
						});
						_this.loadList();
					},
					fail: function(res) {
						hxt.Notify({
							type: 'danger',
							message: '操作失败：' + res.errMsg
						});
					}
				});
			}
		}
	}
</script>

<style>
	.van-calendar__bottom-info {
		color: red;
	}

	.van-button {
		height: 100% !important;
	}

	.inputborder {
		border: 2rpx solid #e5e5e5;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 1rpx 10rpx;
	}

	.inputborder .van-cell {
		padding: 10rpx !important;
	}

	.txt-css {
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-line;
	}

	.submit-bar {
		position: sticky !important;
		z-index: 0 !important;
	}
</style>